<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="elcard">
        <!-- 顶部 -->
        <div class="top">
          <div class="left">
            <span>学科名称</span>
            <el-input
              v-model="keyword"
              autocomplete="off"
              class="el-input_inner"
              size="small"
            ></el-input>
            <el-button size="small">清除</el-button>
            <el-button size="small" type="primary">搜索</el-button>
          </div>
          <div class="right">
            <el-button size="small" type="success" icon="el-icon-edit" @click="addOrModify(-1)"
              >新增学科</el-button>
          </div>
        </div>
        <!-- Tag 标签 -->
        <div class="middle-tag">
          <el-tag type="info" size="middle">
            <i class="el-icon-info"></i> 数据一共 {{total}} 条</el-tag
          >
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="subjectName" label="学科名称"></el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示">
            <template slot-scope="scope">
              <span>{{ scope.row.isFrontDisplay | formatYesorNot }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录"></el-table-column> 
          <el-table-column prop="tags" label="标签"></el-table-column>
          <el-table-column prop="totals" label="题目数量"></el-table-column>
          <el-table-column label="操作" width="350">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="$router.push('/subjects/directorys')">学科分类</el-button>
              <el-button type="text" size="medium" @click="$router.push('/subjects/tags')">学科标签</el-button>
              <el-button @click="addOrModify(scope.row.id)" type="text" size="medium">修改</el-button>
              <el-button type="text" size="medium">删除</el-button>
            </template>
          </el-table-column>
          </el-table-column>
        </el-table>
        <!-- 底部分页栏 -->
        <div class="bottom">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="10"
            background
            layout="prev, pager, next, sizes, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- Dialog对话框 -->
    <subjectsAdd :dialogShow.sync='dialogShow' @updateData='updateData' :clickId='clickId'></subjectsAdd>
    <!-- 用scope.row!!!!!!!!!!! -->
  </div>
</template>

<script>
import { list } from "@/api/hmmm/subjects";
export default {
  name:'subject',
  components:{
      subjectsAdd : () => import ('../components/subjects-add.vue')
  },
  data() {
    return {
      // 顶部搜索关键词
      keyword: "",
      tableData: [
        {
          subjectName: "王小虎",
          username: "王小虎",
          addDate: "2016-05-02",
          isFrontDisplay: "王小虎",
          twoLevelDirectory: "王小虎",
          tags: "王小虎 1518 弄",
          totals: "王小虎 1518 弄",
          operation: "王小虎 1518 弄",
        },
      ],
      total: 10,
      // 目前的页数
      currentPage: 1,
      // 目前的button内的每页数量
      currentPagesize: 10,
      // 对话框显示隐藏
      dialogShow:false,
      // 新增或修改学科的id
      clickId:''
    };
  },
  created() {
    // 生成列表
    this.createList(1,10);
  },
  methods: {
    // 生成列表
    async createList(page,pagesize) {
      let res = await list({
        page: page,
        pagesize: pagesize,
      });
      console.log(res);
      this.tableData = res.data.items;
      this.total = res.data.counts;
    },
    // 点击表格内的修改
    handleClick(row) {
      console.log(row);
    },
    // 输入跳转页 或 点击页码
    handleCurrentChange(page) {
      this.currentPage = page
      this.createList(this.currentPage,this.currentPagesize);
    },
    // 点击button选择每页数量
    handleSizeChange(pagesize) {
      this.currentPagesize = pagesize
      this.createList(this.currentPage,this.currentPagesize);
    },
    // 点击新增或修改学科
    addOrModify(id){
      this.dialogShow = true
      this.clickId = id
    },
    // 更新数据
    updateData(){
      this.createList(1,this.currentPagesize)
    }
  },
};
</script>

<style scoped lang='scss'>
.dashboard-container {
  .app-container {
    .elcard {
      // 顶部
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            width: 70px;
            font-size: 14px;
            font-weight: 700;
          }
          .el-input_inner {
            width: 200px;
            margin-right: 10px;
          }
        }
      }
      // 顶部Tag 标签
      .middle-tag {
        margin: 18px 0;
        width: 100%;
        .el-tag--info {
          width: 100%;
        }
      }
      // 表格

      // 底部分页栏
      .bottom {
        margin-top: 20px;
        text-align: right;
      }
    }
  }
}
</style>
